<template>
    <div class="fourth">
        <div class="fouth-head">
            <h5 class="head1-h5">知识库</h5>
            <h5 class="head2-h5" @click="go">全部 &gt;</h5>
        </div>
        <ul class="hot">
            <li v-for="(v, i) in hotid" :key="i" @click="watch(v)"><i class="el-icon-s-opportunity"></i> {{ v.title
            }}</li>
        </ul>

        <!-- 详情弹出框 -->
        <el-dialog title="知识详情" :visible.sync="watchDialog" width="50%">
            <el-form :model="watchData">
                <el-form-item label="知识标题" :label-width="formLabelWidth">
                    <el-input v-model="watchData.title" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="内容" :label-width="formLabelWidth">
                    <el-input v-model="watchData.content" autocomplete="off" type="textarea" :rows="12" disabled></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="watchDialog = false">取 消</el-button>
                <el-button type="primary" @click="watchDialog = false">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            watchDialog: false,
            formLabelWidth: '100px',
            watchData: {
                id: '',
                title: '标题',
                content: '内容内容内容内容内容内容内容内容内容内容内容内容'
            },
            hotid: [
                { name: '电脑蓝屏解决方案' },
                { name: 'CPU过高处理办法' },
                { name: '变现站线路常见问题与解决措施' },
                { name: '变压器故障与解决措施' }
            ]
        }
    },
    methods: {
        go() {
            this.$router.push('/home/knowledgebase')
        },
        watch(v) {
            this.watchDialog = true
            // console.log(1, v)
            this.watchData.title = v.title
            this.watchData.content = v.content
        }
    },
    mounted() {
        this.$axios({
            url: '/Linux',
            method: 'get',
            params: {
                id_gte: 5,
                id_lte: 8
            }
        }).then(({ data }) => {
            if (data.length > 0) {
                // console.log(data)
                this.hotid = data
            }
        })
    }

}
</script>

<style lang="less" scoped>
.fourth {
    width: calc((100% - 518px) / 3);
    height: 257.5px;
    background: white;
    box-shadow: 0px 3px 6px 0px #E1E1E1;

    .fouth-head {
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #EBEEF5;

        .head1-h5 {
            height: 22px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 22px;
            float: left;
            margin-left: 20px;
            margin-top: 10px;
        }

        .head2-h5 {
            height: 17px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 17px;
            float: right;
            margin-right: 20px;
            margin-top: 14px;
            cursor: pointer;
        }
    }

    .hot {
        // columns: 2;
        // column-count: 2;
        // margin-top: 10px;
        // margin-left: 20px;

        li {
            list-style: none;
            height: 50px;
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #909399;
            line-height: 50px;
            margin-left: 20px;
            cursor: pointer;

            .el-icon-s-opportunity {
                color: #fff;
                background: #DBA000;
                border-radius: 2px;
            }
        }
    }
}
</style>